@(applicationSettings: model.ApplicationSettings)

@import play.api.i18n.Messages 

@main(applicationSettings){
} {
  @content{
    @Html(Messages("left.column.text"))
  } {
    <div class="wizard">
      <a href="#" class="current"><span class="badge badge-inverse">1</span> @Messages("wizard.general.properties.page.link.name")</a> 
      <a href="#" id="templatePageLink"><span class="badge">2</span> @Messages("wizard.view.properties.page.link.name")</a>
      <a href="#" id="finalPageLink"><span class="badge">3</span> @Messages("wizard.final.page.link.name")</a>
    </div>
  } {
		<form id="form">
			<fieldset>
				<legend>General Properties</legend>
				<!-- Bucket Name -->
				<label>@Messages("general.properties.page.bucket.label")
				  <a href="#" class="s3index-help" rel="popover" data-placement="bottom" data-content="@Messages("general.properties.page.bucket.label.help")">
				    <i class="icon-question-sign"></i>
				  </a>
				</label>
				<div class="control-group">
				  <div class="input-append">
						<input type="text" name="bucketName" class="input-large form-error" placeholder="mybucket">
						<a href="#" id="validateBucket" class="add-on"> Check</a>
					</div>
				</div>
				<hr />
				<!-- Exclude Keys -->
				<label>@Messages("general.properties.page.exclude.keys.label")
				  <a href="#" class="s3index-help" rel="popover" data-placement="bottom" data-content="@Messages("general.properties.page.exclude.keys.label.help")">
            <i class="icon-question-sign"></i>
          </a>
				</label>
				<div class="control-group">
					<div class="clonable">
						<div class="input-append control-group">
							<input class="span6" id="excludeKey" name="excludeKey" type="text">
							<a class="clonable-remove-button add-on" href="#">&times;</a>
						</div>
						<a href="#" id="excludeKeyAddButton" class="clonable-add-button"><i class="icon-plus"></i> Add</a>
					</div>					
				</div>				
				<hr />
				<!-- Include Key -->
				<label>@Messages("general.properties.page.include.keys.label")
          <a href="#" class="s3index-help" rel="popover" data-placement="bottom" data-content="@Html(Messages("general.properties.page.include.keys.label.help"))">
            <i class="icon-question-sign"></i>
          </a>
        </label>
				<div class="control-group">
					<div class="clonable">
						<div class="input-append control-group">
							<input class="span6" id="includeKey" name="includeKey" type="text">
							<a class="clonable-remove-button add-on" href="#">&times;</a>
						</div>
						<a href="#" id="includeKeyAddButton" class="clonable-add-button"><i class="icon-plus"></i> Add</a>
					</div>
				</div>
				<hr />
				<!-- Next -->
				<button id="next" type="submit" class="btn btn-large btn-primary">@Messages("general.properties.page.next.button.name") <i class="icon-chevron-right icon-white"></i></button>
				<!-- Go -->
				<a class="btn btn-large" href="#" id="done">@Messages("general.properties.page.done.button.name") <i class="icon-ok"></i></a>
			</fieldset>
		</form>
		
  }
} {
  <script type="text/javascript">
    $(document).ready(function() {
      registerSpinner();
      registerClonable();
      getProperties('@routes.Application.properties')
      $('#next').click(function() {postProperties('@routes.Application.properties', function() {window.location.href = '@routes.Application.viewPropertiesPage'})})
      $('#done').click(function() {postProperties('@routes.Application.properties', function() {window.location.href = '@routes.Application.finalPage'})})
      $('#templatePageLink').click(function() {postProperties('@routes.Application.properties', function() {window.location.href = '@routes.Application.viewPropertiesPage'})})
      $('#finalPageLink').click(function() {postProperties('@routes.Application.properties', function() {window.location.href = '@routes.Application.finalPage'})})
      $('#validateBucket').click(function() {postProperties('@routes.Application.validateProperties', validateBucketSuccessHandler, postPropertiesErrorHandler)})
      $('.s3index-help').each(function(index) {
        $(this).popover({ html : true });
      });
      $("input[type='text']:first", document.forms[0]).focus(); 
    });

    function applyProperties(properties) {
      $('input[name="bucketName"]').val(properties.bucketName);
      for ( var i in properties.includeKey) {
        $('#includeKeyAddButton').trigger('click');
        $('#includeKey' + i).val(properties.includeKey[i]);
      }
      for ( var i in properties.excludeKey) {
        $('#excludeKeyAddButton').trigger('click');
        $('#excludeKey' + i).val(properties.excludeKey[i]);
      }
    }
    
    function validateBucketSuccessHandler(json){
      if(json){
        $('.control-group').has('#validateBucket').addClass('info')
        $('.control-group').has('#validateBucket').append('<span class="s3index-error-msg help-inline">Bucket name is correct.</span>');
      }
      else parseBadRequestWarnings(json)
      
    }
    </script>
}
